Skip to main content

Routes

Elevates is using react-router v6, but the usage has some peculiarities.

We were using HashRouter to keep the device compatibility, but it has some limitations like you cannot use state prop for passing parameters between routes.

The routes are retrieved from the CMS, the current implementation uses a combination of the Menu and the RoutesMapping. The RoutesMapping is basically created in order to map all the routes not includes in the Menu to have the proper map for all the routes in the application. If you want to update the implementation for your project, go to src/providers/cms/ and add or update the current implementation (control) of the getRoutes method.

Elevate also use React.lazy + React.Suspense in order to lazy load the JS+CSS of the routes/views.

In order to define new routes we need to modify the Menu & RoutesMapping combination and the /src/config/routes.js file (basically the viewMap object).

Static routes with dynamic content​

Elevate application relies on the CMS to get the structure of every page in the application. Therefore, altough you can have static routes defined, some information could be retrieved from the CMS like:

  • Theme
  • Containers

In case you need to have pages with satic containers and dynamic ones, please see the section Static view with dynamic content from CMS

Defined routes with dynamic content from the CMS​

  • Movie detail
  • Episode detail
  • Search

Dynamic Routes - Layout defined in the CMS​

This routes are not that obvious, as they are definined in the CMS.

The way it works is the next

  1. The router look into the static routes
  2. If there is no match it executes the next route
{
  path: '/:pageId',
  element: <ModularPage />
},

  1. The service getPageLayout service will try to resolve the :pageId section of the URL to get the page information.

  2. If is resolved it will execute the logic, rendering the containers. Please check Page Model.

In the case that you can not find where a route is defined it will probably living on Accedo Control as a viki page.

Full dynamic pages in Elevate​

  • Home page
  • Shows
  • Movies

React-router v6 uses useNavigate hook for changing the path, so all the navigation in the application must be done using hooks, the <Navigate> component is not allowed in Elevate.

In order to manage the navigation, there are different hooks defined.

  • useHistoryPush: use this hook to do forward navigation.
  • useHistoryBack: use this hook to do backward navigation.
  • useGetHistoryStack: use this hook to get the navigation stack.

The backward navigation navigates 1 path before. If you need to skip some route go to how to skip a route.

Histoy stack control​

To control the routing within the application, we use a custom hook useAppHistory. For every page change in the application you must use the methods exposed in that hook, otherwise, the path can be lost and the behaviour can be different.

You can also pass extra parameters for the next route.

  historyPush({ path: '/path', state: { ...params } });

How To's​

How add a new route​

In order to add a new route, a new entry in the routesMapping CMS service needs to be included. To do so, you need to update your CMS provider for the getRoutes method (control by default) in order to add a new entry with the values that you expect the route to have. The route should be one of the included in the routes.js viewMap array in order to allow the routing system to map it into an Existing View. In case you want to add a new View, you will need to create it, load it in the routes.js file and add it to the viewMap.

Note: you will need to review the constanst.js, ROUTES object in order to include this new route if you plan to use it to navigate to that page manually.

How create a new template​

If an existing route or a new route created following the previous step doesn't follow any of the existing templates (PAGE_TEMPLATES from constanst.js) you can create your own template there, include that value in the Response of the getRoutes template and map the template with the corresponding view (or a new View) in the viewMap object of the routes.js file.

How remove an existing route​

If any of the existent routes are not valid for your project, you can remove it from the getRoutes response and if there's no corresponding route associated with a template, you can also remove the values from the viewMap object of the routes.js file and PAGE_TEMPLATES from constanst.js.

How to use your own mapping system​

As any other method from the Services, the getRoutes can be customized to fit your needs. The intented way of doing this is by creating/updating the provider getRoutes function by adding a new provider or updating the existing one (control) and then also update/add a model for it in order to parse the response from the provider and end up having the expeced format from the service: an Array of route Items with route, template and id.